<template>
	<view style="height: 100vh;;align-items: center;display: flex;flex-direction: column;">
		<!-- 模块二，设定增长进度 -->
		<view class="dateSet">
			<text class="title2">当前日期 current date</text>
			<view style="display: flex;flex-direction: column;align-items: center;">
				<input-box>
					<input type="text" placeholder="未获取当前日期" class="in" v-model="date" disabled="1"/>
					<image src="../../static/banbieweihu.png" mode="aspectFit" class="icon"></image>
				</input-box>
			</view>
		</view>	
		
		<!-- 模块三，添加步骤描述 -->
		<view class="eventDiscription">
			<text class="title">步骤描述 discription</text>
			<view class="disciptionAndButton">
				<textarea placeholder="开始输入" class="editor" v-model="Description"></textarea>
			</view>
		</view>
		<button class="button" @click="submitForm();"><text>提交步骤</text></button>
	</view>
	
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import db from '../../util/db';
const myindex = ref();
// 在生成时载入事件id
onLoad((e)=>{
	myindex.value = e.id;
	console.log("来由id为",myindex.value);
})
const date = ref("2023-12-30");
const Description = ref("");
// slider变化
function sliderChange(e){
	progress.value = e.detail.value;
}
// 提交事件按钮触发
async function submitForm() {
    const descriptionValue = Description.value.trim(); // 去除前后空格
	if (!date) {
		plus.nativeUI.alert("日期获取异常");
	    return; // 阻止表单提交
	}
    if (!descriptionValue) {
        plus.nativeUI.alert("没有添加步骤描述");
        return; // 阻止表单提交
    }
    // 如果所有验证都通过，则创建事件数据对象
    const eventData = {
		myindex:myindex.value,
        date: date.value,
        description: descriptionValue,
    };
    // 提交事件数据（这里只是打印到控制台，实际应用中可能发送到服务器）
    console.log(eventData);
	console.log("----------------执行db内容")
	await db.openDatabase();
    await db.addStep(eventData);
	uni.navigateBack();
}
onMounted(()=>{
	// 获取当前日期
	const currentDate = new Date();
	// 提取年份、月份和日期
	const year = currentDate.getFullYear();
	const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1，并且用padStart补零
	const day = String(currentDate.getDate()).padStart(2, '0'); // 用padStart补零
	// 格式化日期为 YYYY-MM-DD
	date.value = `${year}-${month}-${day}`;
})
</script>

<style lang="scss" scoped>
.icon{
	flex:1;
}
.in{
	left: 35rpx;
	flex: 9;
	font-size: 36rpx;
	font-weight: 500;
	letter-spacing: 2rpx;
	color: rgba(18, 23, 93, 1);
	text-align: left;
}
.title{
	display: block;
	font-size: 35rpx;
	font-weight: 700;
	letter-spacing: 0rpx;
	color: rgba(18, 23, 93, 1);
	text-align: left;
	padding-left:10rpx;
	margin-top: 40rpx;
}
.inputItem{
	width:680rpx;
	margin-bottom: 10rpx;
	display: flex;
	flex-direction: column;
}
.dateSet{
	width:680rpx;
	.title2{
		padding-left:10rpx;
		font-size: 30rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		color: rgba(18, 23, 93, 1);
		text-align: left;
		margin-bottom: 10rpx;
		margin-top: 50rpx;
	}
}
.eventDiscription{
	width:680rpx;
	flex:1;
	display: flex;
	flex-direction: column;
	.disciptionAndButton{
		display: flex;
		flex-direction: column;
		align-items: center;
		flex:1;
	}
	.editor{
		width: 660rpx;
		font-size: 40rpx;
		border-top: 1rpx solid black;
		padding-top: 15rpx;
		margin-top: 20rpx;
		flex:1;
	}
}
.button{
	width: 630rpx;
	height: 100rpx;
	opacity: 1;
	border-radius: 200rpx;
	background: rgba(36, 107, 253, 1);
	box-shadow: 8rpx 16rpx 48rpx  rgba(36, 107, 253, 0.25);
	display: flex;
	justify-content: center;
	margin-bottom: 20rpx;
	position: fixed;
	left: 50%;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%); 
	text{
		margin-top: 22rpx;
		font-size: 35rpx;
		font-weight: 400;
		letter-spacing: 0.32rpx;
		line-height: 52rpx;
		color: rgba(255, 255, 255, 1);
	}
}
.error{
	font-size: 40rpx;
	font-weight: 400;
	letter-spacing: 3rpx;
	color: red;
	flex:1;
	align-items: center;
}
</style>